<template>
<Affix :offset-top="80">
  <div class="bg414243">
    <ul class="submenu hd" v-show="subMenus.length > 0">
      <li v-for="(item ,index) in subMenus" :key="index" :class="{active: item.active}" @click="goLink(item)">
        {{item.title}}
      </li>
    </ul>
  </div>
</Affix>
</template>

<script>
export default {
  props: ['subMenus'],
  methods: {
    goLink(item) {
      this.$router.push(item.link)
    }
  }
};
</script>

<style lang="less" scoped>
@import '../assets/styles/vars.less';
.bg414243{
  background: #414243;
}
.submenu {
  overflow: hidden;
  li {
    line-height: 50px;
    float: left;
    width: 120px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    &.active{
      background: #333;
      color: @color-primary;
    }
  }
}
</style>
